<template>
  <div class="w-full bg-[#f7f7f7]" id="div-1">
    <!-- <div class="m-auto w-3/5 bg-[#fff]">1231</div> -->
    <div class="m-auto w-3/5 py-4 pt-8" id="div-2">
      <a-row :gutter="15" id="a-row-1">
        <a-col :span="17" class="" id="a-col-1">
          <div id="div-222" class="bg-[#fff] border-solid border border-[#ccc] !p-[14px]">
            <a-row class="flex" id="div-3">
              <a-col :span="6" id="div-4">
                <a-image
                  src="https://picsum.photos/id/3/200/150"
                  width="100%"
                  height="100%"
                  class="object-cover aspect-[4/3]"
                  :id="`div-5`"
                />
              </a-col>
              <a-col :span="18" class="" id="div-6">
                <a-typography-title :level="5" class="pl-[10px]" id="div-7">
                  <a-typography-link href="#" id="div-71" class="!text-[#333]"
                    >极速空间2025年新年力作：CPU AI性能天梯图DIY版正式发布</a-typography-link
                  >
                </a-typography-title>
                <a-typography-paragraph class="text-gray-666 text-[14px] mt-2 !mb-0 pl-[10px]" id="div-8">
                  极速空间CPU AI性能天梯图DIY系统请用谷歌浏览器，edge浏览器暂时无法出图 于2025年2月5日正式发布！
                  当前，世界处于人工智能大爆发的初期，AI性能越来越重要，对大多数用户来说，要弄清楚众多型号的算力差异，最简单的办法就是看“天梯图”。和目前的静态天梯图不同的是，站长这次采用了一种全新的方法去实现，您可以轻点鼠标，就能打造个性化的“CPU
                  AI性能天梯图”。系统特
                </a-typography-paragraph>
                <a-typography-paragraph class="text-gray-400 text-sm !mb-0 absolute bottom-0 right-0 leading-none" id="div-9"
                  >02-05</a-typography-paragraph
                >
              </a-col>
            </a-row>
            <a-divider class="my-[10px]" id="div-10" />
            <a-row id="div-11" :gutter="20" class="mt-[14px]">
              <a-col :span="12" v-for="(item, index) in articleList" :key="index" class="my-[8px]" :id="`div-12-${index}`">
                <a-row :wrap="false" class="items-center" :id="`div-13-${index}`">
                  <a-col flex="none" :id="`div-14-${index}`">
                    <a-avatar
                      shape="square"
                      :size="16"
                      class="!text-[12px] bg-[#999]"
                      :id="`div-15-${index}`"
                      :class="{
                        '!bg-[#F0524F]': index == 0,
                        '!bg-[#2E9AE8]': index == 1,
                      }"
                    >
                      {{ index + 2 }}
                    </a-avatar>
                  </a-col>
                  <a-col flex="auto" class="overflow-hidden whitespace-nowrap text-ellipsis text-[14px] pl-[5px]" :id="`div-16-${index}`">
                    <a-typography-link href="#" :id="`div-161-${index}`" class="!text-[#333]">{{ item.title }}</a-typography-link>
                  </a-col>
                  <a-col flex="none" :id="`div-171-${index}`">
                    <div class="text-gray-400 text-sm ml-[40px]" :id="`div-17-${index}`"> {{ item.date }}</div>
                  </a-col>
                </a-row>
              </a-col>
            </a-row>
          </div>
        </a-col>
        <a-col :span="7" class="h-full" id="div-18">
          <div id="div-19" class="bg-[#fff] border-solid border border-[#ccc]">
            <div class="text-[16px] leading-[40px] text-[#666] bg-[#f7f7f7] pl-[10px]" id="div-20"> 最近更新文章 </div>
            <a-row id="div-21" class="!px-[14px] py-[7px]">
              <a-col v-for="(item, index) in articleListLeft" :key="index" class="my-[6px]" :id="`div-22-${index}`">
                <a-row :wrap="false" class="items-center" :id="`div-23-${index}`">
                  <a-col flex="none" :id="`div-24-${index}`">
                    <a-avatar
                      shape="square"
                      :size="16"
                      class="!text-[12px] bg-[#999]"
                      :class="{
                        '!bg-[#F0524F]': index == 0 || index == 1 || index == 2,
                      }"
                      :id="`div-25-${index}`"
                    >
                      {{ index + 1 }}
                    </a-avatar>
                  </a-col>
                  <a-col flex="auto" class="overflow-hidden whitespace-nowrap text-ellipsis text-[14px] pl-[5px]" :id="`div-26-${index}`">
                    <a-typography-link href="#" :id="`div-261-${index}`" class="!text-[#333]">{{ item.title }}</a-typography-link>
                  </a-col>
                </a-row>
              </a-col>
            </a-row></div
          >
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script setup lang="jsx">
  const articleList = ref([
    {
      title: '问核显世界,谁主沉浮? 集成显卡的发展历程及...',
      date: '08-13',
      color: 'red',
    },
    {
      title: '成都初中/小学 数学辅导 一对一仅100元起',
      date: '01-20',
      color: 'blue',
    },
    {
      title: '处理器世界天下大乱，乱世里的六大英雄人物...',
      date: '06-17',
      color: 'gray',
    },
    {
      title: '这类显卡日落西山，但落不下去（附：英伟达...',
      date: '02-04',
      color: 'blue',
    },
    {
      title: '只要采用这个阵型，中国足球队能拿冠军（CP...',
      date: '12-05',
      color: 'gray',
    },
    {
      title: 'i9-13900K和R9-7950X决战紫禁之巅 (酷睿13...',
      date: '10-23',
      color: 'blue',
    },
    {
      title: '160款电脑处理器的越级比武，既决高下，也分...',
      date: '10-17',
      color: 'gray',
    },
    {
      title: 'intel和AMD处理器哪家好? 比CPU天梯图更高...',
      date: '01-07',
      color: 'blue',
    },
    {
      title: '第一个出生的靠边站（一张图看清酷睿处理器1...',
      date: '06-04',
      color: 'gray',
    },
    {
      title: '站在角落里的冠军——主流处理器性价比第一...',
      date: '09-24',
      color: 'blue',
    },
  ]);
  const articleListLeft = ref([
    {
      title: '极速空间笔记本CPU天梯图2025（移动版CPU性能排行）',
      date: '08-13',
      color: 'red',
    },
    {
      title: '极速空间CPU天梯图2024（intel和AMD CPU性能排行）——跟小虫学电脑配置',
      date: '01-20',
      color: 'blue',
    },
    {
      title: '极速空间显卡天梯图 （2024台式显卡和笔记本显卡性能排行）——跟小虫学电脑配置',
      date: '06-17',
      color: 'gray',
    },
    {
      title: '换个名字算新品？AMD 200系列笔记本CPU天梯图2025新版',
      date: '02-04',
      color: 'blue',
    },
    {
      title: '十大高性价比轻薄本（2025年2月小虫排行榜）',
      date: '12-05',
      color: 'gray',
    },
    {
      title: '十大高性价比游戏电脑主机（小虫精选游戏电脑配置2025年2月排行）',
      date: '10-23',
      color: 'blue',
    },
    {
      title: '极速空间 2025年新年力作：CPU AI性能天梯图DIY版  正式发布',
      date: '10-17',
      color: 'gray',
    },
    {
      title: '成都初中/小学 数学辅导 一对一仅100元起',
      date: '01-07',
      color: 'blue',
    },
    {
      title: '两分钟看懂RTX50系列显卡（RTX50/40显卡参数速查表）',
      date: '06-04',
      color: 'gray',
    },
    {
      title: '平庸和潜力共存，酷睿Ultra200S助英特尔重归王座',
      date: '09-24',
      color: 'blue',
    },
  ]);
</script>

<style></style>
